import logo from "./logo.svg";
import "./App.css";
import RouterView from "./router";
import { Link, useLocation, useNavigate } from "react-router-dom";
import icon1 from "../src/img/tabbar/iconfontdongtai.png";
import icon2 from "../src/img/tabbar/xiaolian-.png";
import icon3 from "../src/img/tabbar/ticai.png";
import icon4 from "../src/img/tabbar/wode.png";
import aicon1 from "../src/img/tabbar2/iconfontdongtai.png";
import aicon2 from "../src/img/tabbar2/xiaolian-.png";
import aicon3 from "../src/img/tabbar2/ticai.png";
import aicon4 from "../src/img/tabbar2/wode.png";
import { useEffect, useState } from "react";
const data = [
  { path: "home", icon: icon1, name: "彩生活", acion: aicon1 },
  { path: "huodong", icon: icon2, name: "彩活动", acion: aicon2 },
  { path: "shichang", icon: icon3, name: "彩市场", acion: aicon3 },
  { path: "zhongxin", icon: icon4, name: "彩中心", acion: aicon4 },
];

function App() {
  let [curindex, setcurindex] = useState(0);
  let [isshow, setisshow] = useState(true);
  let { pathname } = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    let token = sessionStorage.getItem("token");
    if (token) {
      if (
        pathname == "/home" ||
        pathname == "/huodong" ||
        pathname == "/shichang" ||
        pathname == "/zhongxin"
      ) {
        setisshow(true);
      } else {
        setisshow(false);
      }
    } else {
      if (pathname == "/register") {
        setisshow(false);
      } else if (pathname == "/searchpwd") {
        setisshow(false);
      } else {
        setisshow(false);
        navigate("/login");
      }
    }
  }, [pathname]);
  return (
    <div className="App">
      {isshow && (
        <div className="tabBar">
          {data.map((v, i) => (
            <Link
              onClick={() => {
                setcurindex(i);
              }}
              className={i == curindex ? "activelink" : "link"}
              key={i}
              to={v.path}
            >
              <img
                className="icon"
                src={i == curindex ? v.acion : v.icon}
                alt=""
              />
              {v.name}
            </Link>
          ))}
        </div>
      )}
      <RouterView></RouterView>
    </div>
  );
}

export default App;
